Skip to content

feat(ui): Polish UI and refactor project page components - #45

Merged
HUAHUAI23 merged 7 commits into
FullAgent:mainfrom
norberia:style/vscode-alignment
Nov 7, 2025
Merged

feat(ui): Polish UI and refactor project page components#45
HUAHUAI23 merged 7 commits into
FullAgent:mainfrom
norberia:style/vscode-alignment

Conversation

@norberia

@norberia norberia commented Nov 7, 2025

Copy link
Copy Markdown
Collaborator

Summary

  • Extract PageHeader and ProjectCard components for better code organization
  • Add TypeScript type definitions for Project interface
  • Improve data fetching with AbortController support and proper cleanup
  • Enhance UI to align with VSCode theme styling
  • Bump version to 0.4.1

Test plan

  • Verify project page loads correctly
  • Test component extraction maintains functionality
  • Check data fetching works with proper cleanup
  • Confirm UI styling matches VSCode theme

Fixes #33

🤖 Generated with Claude Code

norberia and others added 7 commits November 6, 2025 17:00
…ect pages

- Replace VS Code theme colors (#1e1e1e, #2d2d30, #252526) with bg-background
- Update card backgrounds to use bg-card for consistency
- Replace text colors (white, gray-*) with text-foreground/text-muted-foreground
- Update border colors (#3e3e42) to use border-border
- Standardize button colors to use bg-primary hover:bg-primary/90
- Replace hover states with hover:bg-accent for consistent interactions
- Enhance status indicators with dark: variants for theme support
- Improve input field styling with bg-background border-input
- Update both primary and secondary sidebars
- Ensure full compatibility with light/dark theme switching

Affected files:
- All project pages under app/projects/
- Project sidebar components
- Updated globals.css for better variable definitions

This change ensures consistent theming across the entire application
and improves maintainability by centralizing color definitions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Moved the NoProject import above local imports for improved readability and consistency with import grouping conventions.
- Extract PageHeader and ProjectCard
   components for better code organization
   - Add TypeScript type definition for Project
   interface in types/project.ts
   - Improve data fetching with AbortController
   support and proper cleanup
   - Fix memory leaks in polling by aborting
   requests on unmount
   - Use useCallback for fetchProjects function
   to prevent unnecessary re-renders
   - Change ProjectCard link to go to project
   main page instead of terminal
   - Bump version to 0.4.1

   🤖 Generated with [Claude
   Code](https://claude.com/claude-code)

   Co-Authored-By: Claude
   <noreply@anthropic.com>
@norberia
norberia requested a review from HUAHUAI23 November 7, 2025 09:37
@github-actions

github-actions Bot commented Nov 7, 2025

Copy link
Copy Markdown

✅ PR Check Results: Passed

Build Checks

Check Status
Lint & Build ✅ Passed
Docker Build ✅ Passed

✨ Great work!

All checks passed successfully. Your PR is ready for review.

Details:

  • ✅ Code quality verified (linting passed)
  • ✅ Build successful
  • ✅ Docker image build verified (linux/amd64)
    Commit: 90140ddeadb4e9c237212c9bbe26d5d5f3da7c34
    Branch: style/vscode-alignment

🔗 View Details:

@HUAHUAI23
HUAHUAI23 requested a review from Copilot November 7, 2025 10:22

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the project list UI with improved theming and component organization, bumping the version from 0.2.2 to 0.4.1.

  • Extracted reusable ProjectCard and PageHeader components from the projects page
  • Enhanced sidebar theming with new CSS variables for background colors and improved hover states
  • Improved projects page with proper AbortController cleanup for fetch requests

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
types/project.ts Adds a new Project interface type definition to centralize the project type
package.json Version bump from 0.2.2 to 0.4.1
components/project-sidebar.tsx Updates sidebar styling with new theme variables (bg-sidebar-background, hover:bg-sidebar-accent) and adds group hover effects for icons
components/project-secondary-sidebar.tsx Applies consistent theming updates with new background and accent colors, adds group hover effects
components/features/projectList/ProjectCard.tsx New component extracting project card UI from the projects page for reusability
components/features/projectList/PageHeader.tsx New component extracting page header UI from the projects page
app/projects/page.tsx Refactored to use extracted components, improved data fetching with AbortController support, and updated routing from /terminal to base project URL
app/projects/[id]/layout.tsx Removes redundant bg-background class from layout (background is now set by nested components)
app/globals.css Adds new sidebar theme variables (--sidebar-background, --sidebar-project-background) and updates dark theme background color and accent values

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread app/globals.css
Comment thread components/project-secondary-sidebar.tsx
@HUAHUAI23
HUAHUAI23 merged commit 538bddf into FullAgent:main Nov 7, 2025
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ui): Polish UI, align with VSCode theme

3 participants